<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import {BorderBox4,DigitalFlop,Charts} from '@kjgl77/datav-vue3'
import Monitor from "@/components/Monitor.vue";
import Sensor from "@/components/Sensor.vue";
import Captrue from "@/components/Captrue.vue";
import Chart from "@/components/Chart.vue";

// 温室数据
const greenhouse = reactive({
  name: 'BoxNo:300023040198',
  area: 0.68,
  address: '云南大学呈贡校区',
  deviceCount: 6
})

</script>

<template>
  <div class="dashboard">
    <!-- 顶部信息栏 -->
    <border-box-4 class="header">
      <div class="greenhouse-info">
        <h1 class="title">{{ greenhouse.name }}</h1>
        <div class="info-grid">
          <div class="info-item">
            <span class="label">面积：</span>
            <span>{{ greenhouse.area }}㎡</span>
          </div>
          <div class="info-item">
            <span class="label">地址：</span>
            <span>{{ greenhouse.address }}</span>
          </div>
          <div class="info-item">
            <span class="label">设备总数：</span>
            <span>{{ greenhouse.deviceCount }}台</span>
          </div>
        </div>
      </div>
    </border-box-4>

    <!-- 主要内容区 -->
    <div class="main-content">
      <!-- 左侧传感器数据 -->
      <section class="panel left-panel">
        <border-box-4 class="data-box">
          <h3 class="section-title">大棚数据实时监测</h3>
          <div class="sensor-container">
            <sensor/>
          </div>
        </border-box-4>
      </section>

      <!-- 中间视频监控 -->
      <section class="panel center-panel">
        <border-box-4 class="video-box">
          <h3 class="section-title">实时监控</h3>
          <div class="video-feed">
            <!-- 监控组件 -->
            <monitor/>
          </div>
        </border-box-4>
        <border-box-4 class="history-box">
          <h3 class="section-title">历史抓拍</h3>
          <div class="history-timeline">
            <!-- 历史抓拍组件 -->
            <captrue/>
          </div>
        </border-box-4>
      </section>

      <!-- 右侧统计图表 -->
      <section class="panel right-panel">
        <border-box-4 class="chart-box">
          <h3 class="section-title">数据统计</h3>
          <div class="chart-container">
            <!-- 统计图表组件 -->
            <chart/>
          </div>
        </border-box-4>
      </section>
    </div>
  </div>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 根变量定义 */
:root {
  --primary-color: #00ffff;
  --bg-color: #0f1324;
  --panel-bg: rgba(0, 0, 0, 0.2);
  --spacing-sm: clamp(8px, 1vw, 12px);
  --spacing-md: clamp(12px, 2vw, 20px);
  --spacing-lg: clamp(20px, 3vw, 30px);
}

/* 修改根容器样式 */
.dashboard {
  width: 100vw;
  height: 100vh;
  background-color: var(--bg-color);
  color: #fff;
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  overflow: hidden; /* 防止整体出现滚动条 */
  position: fixed; /* 固定位置 */
  top: 0;
  left: 0;
}
.section-title{
  color: greenyellow;
}
/* 顶部信息栏 */
.header {
  height: clamp(80px, 10vh, 120px);
  min-height: 80px;
  overflow: hidden; /* 防止内容溢出 */
}
.info-grid{
  display: flex;
  justify-content: space-between;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  display: flex;
  gap: var(--spacing-md);
  min-height: 0; /* 关键：防止 flex 子项溢出 */
  overflow: hidden; /* 防止内容溢出 */
}

/* 面板通用样式 */
.panel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  min-width: 0; /* 防止内容溢出 */
  overflow: hidden; /* 防止内容溢出 */
}

.left-panel,
.right-panel {
  width: clamp(300px, 25%, 400px);
  overflow: hidden;
}

.center-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  min-width: 0;
  overflow: hidden;
}

/* 数据盒子 */
.data-box,
.video-box,
.chart-box,
.history-box {
  height: 100%;
  padding: var(--spacing-md);
  background-color: var(--panel-bg);
  overflow: hidden;
  display: flex; /* 使用 flex 布局 */
  flex-direction: column; /* 垂直排列 */
}
.sensor-container {
  flex: 1; /* 使传感器容器填满剩余空间 */
  width: 100%; /* 确保宽度填满 */
  height: 100%; /* 确保高度填满 */
}

/* 视频区域 */
.video-box {
  flex: 2.5;
  min-height: 0; /* 允许收缩 */
  overflow: hidden;
}
.video-feed {
  padding-left: 34px
}
.history-box {
  flex: 2.5;
  min-height: 0; /* 允许收缩 */
  overflow: hidden;
}
.history-timeline {
  padding-left: 20px
}
/* 响应式布局 */
@media screen and (max-width: 1400px) {
  .left-panel,
  .right-panel {
    width: clamp(250px, 30%, 300px);
  }
}

@media screen and (max-width: 1200px) {
  .main-content {
    flex-direction: column;
  }

  .left-panel,
  .right-panel {
    width: 100%;
    height: auto;
  }

  .center-panel {
    order: -1;
  }

  .video-box,
  .history-box {
    height: 300px;
  }
}

/* DataV 组件样式调整 */
:deep(.border-box-content) {
  padding: var(--spacing-sm);
  height: 100%;
  overflow: hidden;
}

:deep(.dv-charts-container) {
  height: 100%;
  overflow: hidden;
}
</style>